<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane>
        <span slot="label"> 黑名单列表</span>

        <nav-btn :sheet-header="xlsxHeader"
                 :sheet-list="_list"
                 xlsx-name="黑名单列表"
                 @search-method="handleGetSearchActivity"
        />
        <el-table :data="xlsxSheet"
                  border
                  max-height="680"
                  style="width: 100%">


          <el-table-column
              align="center"
              header-align="center"
              v-for="(item ,index) in settings"
              :prop="index"
              :label="item"
              v-if="index!=='volunteerAvatar'&&index!=='id'"
              :key="item"
          />
          <el-table-column label="头像">
            <template slot-scope="scope">
              <img
                  :src="scope.row.volunteerAvatar"
                  alt="头像"
                  class="commodity-img"
              />
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleReset(scope.row)"
              >取消黑名单
              </el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="currentPageSize"
            :page-sizes="[10,50,100,500,1000,99999]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleGetBySizeActivity"
            @current-change="handleGetByNumActivity"/>

      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import NavBtn from "@/components/navBtn";

export default {
  components: { NavBtn },
  data () {
    return {
      list: [],
      currentPage: 1,
      keyword: "",
      currentPageSize: 10,
      total: 0,
      content: "",
      Contentshow: false,
      settings: {
        "volunteerId": "志愿者ID",
        "volunteerName": "志愿者姓名",
        "volunteerIdentify": "身份证号",
        "volunteerAccount": "账户",
        "volunteerAddress": "地址",
        "volunteerSpecialty": "特长",
        "volunteerOccupation": "职业",
        "volunteerNo": "中国志愿者编号",
        "volunteerSex": "志愿者性别",
        "volunteerAge": "志愿者年龄",
        "volunteerMobile": "志愿者手机号",
        "id":"黑名单ID"
      },
    };
  },
  mounted () {
    this.handleGetByNumActivity(1);
  },
  computed: {

    xlsxSheet () {
      const list = this.list;
      let _list = [];
      _list = list.map(value => {
        console.log(`value-->`, value);
        return {
          "volunteerId": value?.volunteerId,
          "volunteerName": value?.volunteerName,
          "volunteerIdentify": value?.volunteerIdentify,
          "volunteerAvatar": value?.volunteerAvatar,
          "volunteerAccount": value?.volunteerAccount,
          "volunteerAddress": value?.volunteerAddress,
          "volunteerSpecialty": value?.volunteerSpecialty,
          "volunteerOccupation": value?.volunteerOccupation,
          "volunteerNo": value?.volunteerNo,
          "volunteerSex": value?.volunteerSex,
          "volunteerAge": value?.volunteerAge,
          "volunteerMobile": value?.volunteerMobile,
          "id":value.id
        };
      });

      return _list;
    },
    xlsxHeader () {
      const { settings } = this;
      return Object.values(settings);
    },
    _list () {
      const { xlsxSheet } = this;
      let _list = xlsxSheet.map(value => {
        return [Object.values(value)];
      });
      return _list.flat(1);
    },

    getterVolunteerInfo: () => {
      let list = this.list;
      return list?.map(a => a.userinfo);
    },
  },
  methods: {
    // 分页查询全部闲置

    async handleGetBySizeActivity (size) {
      this.currentPageSize = size;
      await this.handleGetVolunteer();
    },
    //获取志愿者信息
    async handleGetActivityInfo (params) {
      this.articleContentshow = true;
      // console.log(params)
      let res = await this.$http.volunteerGet(params);
      if (res.code !== 0) return null;
      this.content = res.data;
    },
    // 分页查询全部活动
    async handleGetByNumActivity (num) {
      this.currentPage = num;
      await this.handleGetVolunteer();
    },
    async handleGetVolunteer () {
      const res = await this.$http.blacklistGet({
        pageNum: this.currentPage,
        pageSize: this.currentPageSize,
      });
      if (res.code !== 0) return null;
      console.log(res);
      this.list = res.data?.records.map(val => {
        if (!val.userinfo) {
          delete val.userinfo;
          return [];
        }
        val.userinfo.id = val.id;
        return val.userinfo;
      });

      this.total = res.data.total;
    },
    async handleReset (info) {
      //  拉入黑名单
      console.log(`info-->`, info);
      console.log(info.id);
      let res = await this.$http.blacklist_delete(info.id);
      if (res.code !== 0) return this.$alert("出错啦");
      await this.handleGetVolunteer();
    },
    handleGetSearchActivity (info) {
      let {
        content,
        dataRange,
      } = info;

      return this.searchByBoth(content, dataRange);

    },
    async searchByBoth (content, dataRange) {
      //  后端接口

      const res = await this.$http.blacklistListBySearch(
          {
            from: dataRange?dataRange[0] ?? "":"",
            keywords: content ?? "",
            pageNum: this.currentPage ?? "",
            pageSize: this.currentPageSize ?? "",
            to: dataRange?dataRange[1] ?? "":"",
          },
      );
      if (res.code !== 0) return null;
      this.total = res.data.total;
      this.list = res.data?.records.map(val => {
        if (!val.userinfo) {
          delete val.userinfo;
          return [];
        }
        val.userinfo.id = val.id;
        return val.userinfo;
      });


    },
  },

};
</script>

<style lang="less" scoped>
.commodity-img {
  width: 40px;
}

.el-table {
  margin-top: 20px;
}

.row {
  margin-top: 20px;
}
</style>
